<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Franklin Capital Corporation</title>
        <link href="css/styles.css" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="js/jquery.js"></script>
        <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="container">
            <header>
                <h1><img src="images/Franklin-Capital-Corporation-logo.png" alt="Franklin Capital Corporation"  />Franklin Capital Corporation </h1>
                <nav>
                    <ul>
                        <li><a href="#" class="first selected">Home</a></li>
                        <li><a href="#">Make a Payment</a></li>
                        <li><a href="#">Auto Pay Setup</a></li>
                        <li><a href="#">View History</a></li>
                        <li><a href="#">Manage Account</a></li>
                    </ul>
                </nav>
                <form id="search" method="post" action="">
                    <input type="text" value="Search" />
                    <span></span>
                    <button type="submit">Go</button>
                </form>
            </header>
            <div id="content" class="inner">
                <div class="whitePanelBox alert"><span class="red">ALERT:</span> You have a due of 5 days for the payment of $452</div>
                <div id="bodyContainer" class="col2">
                    <div class="main_col history">

                        <div class="whitePanelBox placeholder1"></div>
                        <div class="whitePanelBox placeholder1 timeline">
                            <ul class="timeLineUl">
                                <li class="prev"><a href="#" class="prev">&nbsp;</a></li>
                                <li><a href="#" class="twoWeeksAgo">&nbsp;</a></li>
                                <li><a href="#" class="lastWeek">&nbsp;</a></li>
                                <li><a href="#" class="today selected">&nbsp;</a></li>
                                <li><a href="#" class="nextWeek">&nbsp;</a></li>
                                <li><a href="#" class="nextTwoLater">&nbsp;</a></li>
                                <li class="next"><a href="#" class="next">&nbsp;</a></li>

                            </ul>
                        </div>
                        <table class="history" border="0" cellspacing="0" cellpadding="0" >
                            <tr class="title">
                                <th class="date" width="117px"> Date</th>
                                <th class="desc" width="427px">Description</th>
                                <th class="amount last" width="128px">Amount</th>
                            </tr>
                            <tr class="light">
                                <td>
                                    22/12/2012
                                </td>
                                <td>
                                    original principal balance
                                </td>
                                <td class="last">
                                    
                                </td>
                            </tr >
                            <tr class="dark">
                                <td>
                                    22/12/2012
                                </td>
                                <td>
                                    original principal balance
                                </td>
                                <td class="last">
                                    
                                </td>
                            </tr>
                            <tr class="light">
                                <td >
                                    22/12/2012
                                </td>
                                <td>
                                    original principal balance
                                </td>
                                <td class="last">
                                    
                                </td>
                            </tr>
                            <tr class="dark">
                                <td>
                                    22/12/2012
                                </td>
                                <td >
                                    original principal balance
                                </td>
                                <td class="last">
                                    
                                </td>
                            </tr>

                        </table>

                        
                    </div>
                    <div class="side_col top_space customerLoggedonHome">
                        <ul class="grey">
                            <li class="header"><h3><strong>Payment</strong> Info</h3></li>
                            <li class="dark">Past Due Amount <strong>$256</strong></li>
                            <li>Current Due Amount <strong>$256</strong></li>
                            <li class="dark">Outstanding Fees <strong>$256</strong></li>
                            <li>Current Principal Balance <strong>$256</strong></li>
                            <li class="dark">Due Date <strong>22/12/2011</strong></li>

                        </ul>
                        <ul class="grey">
                            <li class="header"><h3><strong>Account</strong> Info</h3></li>
                            <li class="dark">Account Number <strong>25585468</strong></li>
                            <li>Contract Date <strong>22 : 12 : 2011</strong></li>
                            <li class="dark">Original Principal Balance <strong>$256</strong></li>
                            <li>Current Principal Balance <strong>22/12/2011</strong></li>
                            <li class="dark">Interest Rate <strong>4.50%</strong></li>

                        </ul>
                        
                    </div>
                </div>
            </div>
            <footer>
                <ul>
                    <li class="needHelp"> Need help? </li>
                    <li class="customerServiceOnline"> 
                        <a href="#" title="Click to contact Customer Services Online">Click</a>
                        <strong>Customer Service Online</strong> 
                    </li>
                    <li class="call">
                        <p>Call <a href="tel:1-800-125-9568">1-800-FCC-1 (1-800-125-9568)</a></p>
                    </li>
                    <li class="visit">
                        <p>Visit a <strong>FCC Branch</strong></p>
                    </li>
                </ul>
                <div id="copyright">
                    <hr />
                    Copyright © 2011. Franklin Capital Corporation. All rights reserved. <a href="">Terms of Use</a> | <a href="">Privacy Policy</a> 
                </div>
            </footer>
            <script type="text/javascript">
                $(function(){
                    $("input[type='radio']").each(function(){
                        var thisCheckbox = $(this);
                        var thisCheckboxId = thisCheckbox.attr('id');
                        var thisText = (thisCheckboxId.indexOf('enabled') > 0) ? 'Enable' : (thisCheckboxId.indexOf('disabled') > 0) ? 'Disable' : '';

                        var newCheckbox = $('<span class="form_check en '+thisText+'">'+thisText+'</span>');
                        if(thisCheckbox.is(':checked')){
                            newCheckbox.addClass('checked');
                        }

                        newCheckbox.click(function(){
                            thisCheckbox.click();
                            $("span.form_check[name='"+thisCheckbox.attr('name')+"']").removeClass('checked');
                            $(this).addClass('checked');
                        });

                        thisCheckbox.change(function(){
                            newCheckbox.click();
                        });

                        newCheckbox.attr('name', thisCheckbox.attr('name'));
                        thisCheckbox.hide(0).after(newCheckbox);
                    });

                });
            </script>
        </div>
    </body>
</html>